.header-container {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  .center {
    position: relative;

    .title {
      position: absolute;
      color: white;
      font-size: 50rpx;
      animation: title 1.5s forwards;

      left: 100rpx;
    }
    .earth {
      width: 300rpx;
      height: 300rpx;
    }
  }
  .left {
    display: flex;
  }
  .right {
    display: flex;
  }
  .star {
    display: flex;

    flex-direction: column;
    align-items: center;
    .vertical-line {
      width: 1rpx;
      border-left: 3rpx solid white;
    }
  }

  .star_one {
    .vertical-line {
      height: 0;
      animation: move_one 1.5s forwards;
    }
  }
  .star_two {
    .vertical-line {
      height: 0;
      animation: move_two 1.5s forwards;
    }
  }
}
@keyframes move_one {
  from {
    height: 0;
  }
  to {
    height: 110rpx;
  }
}

@keyframes move_two {
  from {
    height: 0;
  }
  to {
    height: 220rpx;
  }
}

@keyframes title {
  from {
    top: -50rpx;
    transform: rotate(0);
  }
  to {
    top: 300rpx;
    transform: rotate(360deg);
  }
}

@keyframes earth {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-30);
  }
}
